<template>
  <el-container>
    <el-header>
      <div style="display: flex; line-height: 70px">
        <div
          style="
            width: 66%;
            text-indent: 0.5em;
            font-size: 18px;
            font-weight: bold;
          "
        >
          我的订单详细
        </div>
        <div>
          <div>
            <span>未付款</span>
            <el-tooltip :content="'Switch value: ' + value" placement="top">
              <el-switch
                v-model="value"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="100"
                inactive-value="0"
              />
            </el-tooltip>
            <span>已付款</span>
          </div>
        </div>
        <div>
          <el-date-picker v-model="value1" type="date">
            <template #default="cell">
              <div class="cell" :class="{ current: cell.isCurrent }">
                <span class="text">{{ cell.text }}</span>
                <span v-if="isHoliday(cell)" class="holiday"></span>
              </div>
            </template>
          </el-date-picker>
        </div>
        <div>
          <el-date-picker v-model="value2" type="date">
            <template #default="cell">
              <div class="cell" :class="{ current: cell.isCurrent }">
                <span class="text">{{ cell.text }}</span>
                <span v-if="isHoliday(cell)" class="holiday"></span>
              </div>
            </template>
          </el-date-picker>
        </div>
        <div>
          <el-button @click="cx()">查询</el-button>
        </div>
      </div>
    </el-header>
    <el-main>
      <el-table
        :data="lists"
        border
        style="width: 100%; margin: 10px auto 0;"
      >
        <el-table-column prop="ordid" label="订单号" width="180">
        </el-table-column>

        <el-table-column prop="addr" label="收货地址" width="380">
        </el-table-column>

        <el-table-column prop="phone" label="电话" width="180">
        </el-table-column>

        <el-table-column prop="shipno" label="发货单号" width="380">
        </el-table-column>

        <el-table-column prop="amount" label="总价" width="160">
        </el-table-column>

        <el-table-column prop="ispay" label="是否付款" width="180">
			<template #default="scope">
				{{fukuan(scope.row.ispay)}}
			</template>
		</el-table-column>

        <el-table-column prop="tcreate" label="下单时间" width="180">
          <template #default="scope">
            {{ filters(scope.row.tcreate) }}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-popover placement="left" :width="600" trigger="click">
              <template #reference>
                <el-button @click="btn(scope.row.ordid)">明细</el-button>
              </template>
              <p>{{ scope.row.ordid }}#订单详情 发往:</p>
              <el-table :data="mx">
                <el-table-column label="图片" width="100">
                  <template #default="scope">
                    <img
                      :src="`${$Imgurl}/api/public/showImg/${scope.row.picture}`"
                      style="width: 50px"
                    />
                    <!-- {{scope.row.picture}} -->
                  </template>
                </el-table-column>

                <el-table-column prop="name" label="商品名称" width="200">
                </el-table-column>

                <el-table-column prop="price" label="商品价钱" width="100">
                </el-table-column>

                <el-table-column prop="num" label="商品数量" width="100">
                </el-table-column>

                <el-table-column label="小计" width="100">
                  <template #default="scope">
                    <span>
                      {{ scope.row.num * scope.row.price }}
                    </span>
                  </template>
                </el-table-column>
              </el-table>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-button type="primary" style="margin: 0 auto" @click="xs()"
      >显示更多</el-button
    >
  </el-container>
</template>

<script>
// 拦截器
import instance from "../../ajax/index.js";
// 时间
// 操作明细defineComponent, reactive, toRefs
//
//
// import { defineComponent, reactive, toRefs } from 'vue'
export default {
  name: "Myorder",
  data() {
    return {
      value: "0",
      value1: "",
      value2: "",
      myorderlist: [],
      lists: [],
      mx: [],
      ddh: 0,
      jj: 0,
      ii: 0,
      qb: [],
	  myorderlists:[],
    };
  },
  created() {
    // 发起get请求，获取数据
    instance
      .get("/api/fore/ord/findOrdLineByPage/0/5")
      .then((res) => {
        // 判断状态
        // console.log(res.data.data);
        if (res.status === 200) {
          // 向表格渲染数据
          this.myorderlist = res.data.data.orders;
          this.lists = this.myorderlist;
          this.ddh = this.myorderlist[0].ordid - 5;
          // console.log(this.lists);
        }
      })
      .catch((error) => {
        console.log(error);
      });
	  // 
	  instance
	    .get("/api/fore/ord/findOrdLines")
	    .then((res) => {
	      // 判断状态
	      // console.log(res.data.data);
	  	this.myorderlists = res.data.data;
	  	// console.log(this.myorderlists);
	  	// console.log(this.myorderlist);
	    })
	    .catch((error) => {
	      console.log(error);
	    });
  },
  computed: {
    filters() {
      return (x) => {
        let year = new Date(x).getFullYear();
        let month = new Date(x).getMonth() + 1;
        let day = new Date(x).getDate();
        return year + "-" + month + "-" + day;
      };
    },
	fukuan(){
		return (x) => {
		  // console.log(x);
		  if(x==0){
			  return "未付款";
		  }else if(x==1){
			  return "已付款";
		  }
		};
	}
  },
  methods: {
    btn(x) {
      // 发起get请求，获取数据
      instance
        .get("/api/adm/ord/findItemInfoByOrdid/" + x + "")
        .then((res) => {
          // 判断状态
          // console.log(res.data.data);
          if (res.status === 200) {
            // 向表格渲染数据
            this.mx = res.data.data;
            // console.log(this.mx);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    xs() {
      this.jj++;
      // 发起get请求，获取数据
      for (let i = this.jj; i < this.jj + 1; i++) {
        instance
          .get("/api/fore/ord/findOrdLineByPage/" + this.jj + "/5")
          .then((res) => {
            // 判断状态
            // console.log(res.data.data);
            if (res.status === 200) {
              // 向表格渲染数据
              for (let i = 0; i < 5; i++) {
                if (res.data.data.orders[i]) {
                  this.myorderlist.push(res.data.data.orders[i]);
                  this.lists = this.myorderlist;
                  // console.log(res.data.data.orders[i]);
                  // console.log(res.data.data.orders[0]);
                }
              }
              // console.log(this.myorderlist);
            }
          })
          .catch((error) => {
            console.log(error);
          });
      }
    },
    // 查询
    cx() {
	  // console.log(this.value1);
	  // let time1 = this.value1.getTime();
	  // console.log(time1);
	  // let time2 = this.value2.getTime();
	  if(this.value1!=''&&this.value2!=''){
		  let time1 = this.value1.getTime();
		  let time2 = this.value2.getTime();
		  if(time1!=''&&time2!=''){
		  	if(time1 <= time2){
		  		if(this.value==100){
					console.log('123');
		  			var arr =[];
		  			for (let index in this.myorderlists) {
						console.log(index);
		  			  var sj = this.myorderlists[index].tcreate;
					  var ispay = this.myorderlists[index].ispay;
		  			  if (time1 <= sj && sj <= time2 && ispay==1) {
		  				arr.push(this.myorderlists[index]);
		  			  }
		  			}
					// console.log(arr);
		  			this.lists = arr;
		  		}else if(this.value==0){
					var arr =[];
		  			for (let index in this.myorderlists) {
		  			  var sj = this.myorderlists[index].tcreate;
					  var ispay = this.myorderlists[index].ispay;
		  			  if (time1 <= sj && sj <= time2 && ispay==0) {
						arr.push(this.myorderlists[index]);
		  			  }
		  			}
					this.lists = arr;
		  		}
		  	}else{
		  		alert('时间选择有错');
		  	}
		  }else{
		  		alert('时间选择不可为空');
		  }
	  }else{
		  alert('时间选择不可为空');
	  }
    }
  },
  setup() {
    const holidays = [
      "2021-10-01",
      "2021-10-02",
      "2021-10-03",
      "2021-10-04",
      "2021-10-05",
      "2021-10-06",
      "2021-10-07",
    ];

    function isHoliday({ dayjs }) {
      return holidays.includes(dayjs.format("YYYY-MM-DD"));
    }

    return {
      isHoliday,
    };
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
</style>
